import CommonDrawer from '@/components/CommonDrawer';
import { Descriptions } from 'antd';
import dayjs from 'dayjs';

const Detail = (props) => {
  const { open, record, onCancel } = props;

  // 格式化数据用于展示
  const formatData = (data) => {
    if (!data) return {};

    return {
      ...data,
      time: data.time ? dayjs(data.time).format('YYYY-MM-DD HH:mm:ss') : '-',
      remark: data.remark || '-',
    };
  };

  const formattedRecord = formatData(record);

  const items = [
    {
      key: 'customerCode',
      label: '客户编号',
      children: record?.customerCode || '-',
    },
    {
      key: 'customerName',
      label: '客户名称',
      children: record?.customerName || '-',
    },
    {
      key: 'contacts',
      label: '联系人',
      children: record?.contacts || '-',
    },
    {
      key: 'phone',
      label: '联系电话',
      children: record?.phone || '-',
    },
    {
      key: 'address',
      label: '地址',
      children: record?.address || '-',
    },
    {
      key: 'account',
      label: '付款帐号',
      children: record?.account || '-',
    },
    {
      key: 'bankName',
      label: '银行名称',
      children: record?.bankName || '-',
    },
    {
      key: 'bankCode',
      label: '银行行号',
      children: record?.bankCode || '-',
    },
    {
      key: 'time',
      label: '系统时间',
      children: formattedRecord.time,
    },
    {
      key: 'remark',
      label: '备注',
      children: formattedRecord.remark,
    },
  ];

  return (
    <CommonDrawer
      title="详情"
      open={open}
      onClose={onCancel}
      width={800}
      destroyOnHidden
      footer={null}
    >
      <h3>客户信息</h3>
      <Descriptions
        items={items}
        column={2}
        bordered
        size="middle"
        labelStyle={{
          fontWeight: 'bold',
          width: '120px',
          textAlign: 'right',
        }}
        contentStyle={{
          minHeight: '32px',
          padding: '8px 12px',
        }}
      />
    </CommonDrawer>
  );
};

export default Detail;
